<template>
	<view style="height:100vh;overflow:hidden;padding-top: 100px;">
		
		 <button type="default" @click="onSinngle">单张压缩</button>
		 <image v-if="single" class="image" :src="single" mode="aspectFill"></image>
        <w-compress ref='wCompress' />
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import lPainter from "@/components/lime-painter/";
	
	export default {
		components: { lPainter,WCompress },
		data() {
			return {
				single:undefined,
				board:undefined,
				imgPath:undefined
			}
		},
		onLoad(e) {
			
		},
		onShow(e) {
			
		},
		methods: {
			 onSinngle() {
				uni.chooseImage({
					count: 1,
					success: res => {
						uni.showLoading({ title: '图片压缩中...', mask: true })
						this.$refs.wCompress.start(res.tempFilePaths[0], {
							pixels: 4000000,  // 最大分辨率，默认二百万
							quality: 0.8,     // 压缩质量，默认0.8
							type: 'jpg',      // 图片类型，默认jpg
							base64: true,     // 是否返回base64，默认false，非H5有效
					    })
						.then(res => {
							console.log(res)
							this.single = res;
							
							//console.log(this.base64toBlob(res));
							
							uni.uploadFile({
							  url: this.$global.host + '/upload',
							  filePath: res,
							  name: 'file',
							  success: (uploadFileRes) => {
								 console.log(uploadFileRes)
							  },
							  fail: (error) => {
								console.log(error)
							  }
							});
							
							uni.hideLoading()
						})
						.catch(e => {
							console.log(e)
							uni.hideLoading()
						})
					}
				})
			},
		    base64toBlob(base64,type) {  
			   var bytes = window.atob(urlData.split(',')[1]);
			   //处理异常,将ascii码小于0的转换为大于0
			   var ab = new ArrayBuffer(bytes.length);
			   var ia = new Uint8Array(ab);
			   for (var i = 0; i < bytes.length; i++) {
			   ia[i] = bytes.charCodeAt(i);
			   }
			   return ia;
			}, 
			handleSuccess(e) {
			  this.imgPath = e;
			  console.log('this.imgPath :>> ', this.imgPath);
			}
		}
	}
</script>


<style lang="scss">
	.zoomImage{
	    width:100%;
	    height:0;
	    padding-bottom: 100%;
	    overflow:hidden;
	    background-position: center center;
	    background-repeat: no-repeat;
	    -webkit-background-size:cover;
	    -moz-background-size:cover;
	    background-size:cover;
	}
</style>